<template>
  <div class="add-event">
    <el-dialog
      v-model="dialogFormVisible"
      title="添加事件"
      align="center"
      style="width: 700px"
    >
      <el-form
        :model="form"
        style="max-width: 600px"
        label-width="auto"
        ref="ruleFormRef"
        :rules="rules"
      >
        <el-form-item label="事件编号:" required prop="id">
          <el-input
            v-model="form.id"
            placeholder="SJ+xxxx年xx月xx日000n(第n起事件) --SJ201812090001"
          ></el-input>
        </el-form-item>
        <el-form-item label="事件类型:" required prop="type">
          <el-select v-model="form.type" placeholder="请选择事件类型">
            <el-option label="碰撞" value="碰撞" />
            <el-option label="刮擦" value="刮擦" />
            <el-option label="碾压" value="碾压" />
            <el-option label="翻车" value="翻车" />
            <el-option label="失火" value="失火" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级:" required prop="level">
          <el-select v-model="form.level" placeholder="请选择事件等级">
            <el-option label="轻微事故" value="1" />
            <el-option label="一般事故" value="2" />
            <el-option label="重大事故" value="3" />
            <el-option label="严重事故" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="发生时间:" required prop="time">
          <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="Pick a date"
            value-format="YYYY.MM.DD HH:mm"
            format="YYYY.MM.DD HH:mm"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="发生地点:" required prop="location">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="车牌号:" required prop="carnumber">
          <el-input
            v-model="form.carnumber"
            placeholder="请输入车牌号 如:鄂A12345"
          />
        </el-form-item>
        <el-form-item label="驾驶员:" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="发生坐标:" required prop="position">
          <el-input
            v-model="form.position"
            @focus="handleFocus"
            :prefix-icon="Location"
            placeholder="点击地图选择坐标"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="处理状态:" required prop="status">
          <!-- 默认选中 待处理 -->
          <el-select v-model="form.status" placeholder="请选择处理状态">
            <el-option label="待处理" value="0" />
            <el-option label="处理中" value="1" />
            <el-option label="已处理" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref, defineExpose } from "vue";
import { Location } from "@element-plus/icons-vue";
// 引入eventStore
import { useEventStore } from "@/stores/event";
const { eventList,addNewEvent } = useEventStore();
// 初始设置为不可见
const dialogFormVisible = ref(false);
// 初始表单
const form = ref({
  id: "",
  type: "",
  level: "",
  location: "",
  carnumber: "",
  name: "",
  status: "0",
  time: "",
  position: "",
});
// 定义校验规则
const rules = {
  id: [{ required: true, message: "请输入事件编号", trigger: "blur" },
  // 字符串，长度为14个字符，格式SJYYYYMMDD000n(第n起事件)
  {min: 14, max: 14, message: "SJYYYYMMDD000n(第n起事件)", trigger: "blur"  }],
  type: [{ required: true, message: "请选择事件类型", trigger: "change" }],
  level: [{ required: true, message: "请选择事件等级", trigger: "change" }],
  location: [{ required: true, message: "请输入发生地点", trigger: "blur" }],
  carnumber: [{ required: true, message: "请输入车牌号", trigger: "blur" },
    { min: 7, max: 7, message: "请输入正确的车牌号", trigger: "blur" }
  ],
  time: [{ required: true, message: "请选择发生时间", trigger: "change" }],
  position: [{ required: true, message: "请选择发生坐标", trigger: "change" }],
  status: [{ required: true, message: "请选择处理状态", trigger: "change" }],
};
// 定义响应式引用
const ruleFormRef = ref(null);

let $map;
onMounted(() => {
  const { proxy } = getCurrentInstance();
  $map = proxy.$map;
});
// 触发表单弹出事件
const addPointClick = () => {
  form.value = {
    id: "",
    type: "",
    level: "",
    location: "",
    carnumber: "",
    name: "",
    status: "0",
    time: "",
    position: "",
  };
  dialogFormVisible.value = true;
};
// 选择地点事件
const handleFocus = () => {
  dialogFormVisible.value = false;
  // 点击地图选择坐标
  $map.once("click", (evt) => {
    console.log(evt.coordinate);
    dialogFormVisible.value = true;
    form.value.position = evt.coordinate;
  });
};
// 表单提交处理
const onSubmit = () => {
  // 表单校验
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      // 提交表单
      console.log(form.value);
      // 将事件提交到store中
      addNewEvent(form.value);
      // 关闭弹窗
      dialogFormVisible.value = false;
    } else {
      console.log("error submit");
      return false;
    }
  });
};

// 传递方法
defineExpose({ addPointClick });
</script>
<style scoped>
span {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
